<template>
	<div class="p-6 space-y-6">
		<h2 class="text-xl font-bold mb-4">库存盘点</h2>

		<el-form :inline="true" :model="filters" class="mb-4">
			<el-form-item label="盘点单状态">
				<el-select v-model="filters.status" placeholder="请选择状态" size="small" clearable style="width: 150px">
					<el-option label="待盘点" value="待盘点" />
					<el-option label="已完成" value="已完成" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" @click="applyFilters">筛选</el-button>
				<el-button size="small" @click="resetFilters">重置</el-button>
			</el-form-item>
		</el-form>

		<el-button type="primary" size="small" class="mb-4" @click="openCreateDialog">新建盘点单</el-button>

		<el-table :data="filteredInventory" border>
			<el-table-column type="index" label="#" width="50" />
			<el-table-column prop="code" label="盘点单号" />
			<el-table-column prop="status" label="状态" />
			<el-table-column prop="warehouse" label="仓库" />
			<el-table-column prop="created" label="创建时间" />
			<el-table-column label="操作">
				<template #default="{ row }">
					<el-button size="small" @click="editInventory(row)">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog v-model="editDialog" :title="isNew ? '新建盘点单' : '编辑盘点单'" width="500px">
			<el-form :model="currentInventory" label-width="80px" :rules="rules" ref="formRef">
				<el-form-item label="盘点单号" prop="code">
					<el-input v-model="currentInventory.code" :disabled="!isNew" />
				</el-form-item>
				<el-form-item label="仓库" prop="warehouse">
					<el-select v-model="currentInventory.warehouse" placeholder="请选择仓库">
						<el-option v-for="w in warehouses" :key="w" :label="w" :value="w" />
					</el-select>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-select v-model="currentInventory.status">
						<el-option label="待盘点" value="待盘点" />
						<el-option label="已完成" value="已完成" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="saveInventory">保存</el-button>
					<el-button @click="editDialog = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const filters = ref({ status: '' })
const inventories = ref([])
const warehouses = ['仓库1', '仓库2', '仓库3']
const formRef = ref()
const isNew = ref(false)

const filteredInventory = computed(() => {
	return inventories.value.filter(item => {
		return filters.value.status ? item.status === filters.value.status : true
	})
})

const applyFilters = () => { }
const resetFilters = () => { filters.value.status = '' }

const editDialog = ref(false)
const currentInventory = ref({ code: '', status: '待盘点', warehouse: '', created: '' })

const openCreateDialog = () => {
	isNew.value = true
	currentInventory.value = { code: 'PD' + Math.floor(Math.random() * 100000), status: '待盘点', warehouse: '', created: new Date().toLocaleString() }
	editDialog.value = true
}

const editInventory = (row) => {
	isNew.value = false
	currentInventory.value = { ...row }
	editDialog.value = true
}

const saveInventory = () => {
	formRef.value.validate(valid => {
		if (!valid) return

		if (isNew.value) {
			inventories.value.unshift({ ...currentInventory.value })
			ElMessage.success('已新建盘点单')
		} else {
			const index = inventories.value.findIndex(i => i.code === currentInventory.value.code)
			if (index !== -1) {
				inventories.value[index] = { ...currentInventory.value }
				ElMessage.success('盘点单已保存')
			}
		}
		editDialog.value = false
	})
}

const rules = {
	code: [{ required: true, message: '请输入盘点单号', trigger: 'blur' }],
	warehouse: [{ required: true, message: '请选择仓库', trigger: 'blur' }],
	status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
}

onMounted(() => {
	inventories.value = Array.from({ length: 15 }).map((_, i) => ({
		code: 'PD' + (10000 + i),
		status: Math.random() > 0.5 ? '已完成' : '待盘点',
		warehouse: warehouses[Math.floor(Math.random() * warehouses.length)],
		created: new Date(new Date().getTime() - Math.random() * 1000 * 60 * 60 * 24 * 30).toLocaleString()
	}))
})
</script>

<style scoped>
.text-xl {
	font-size: 1.25rem;
}
</style>
  
